<template>
  <div id="orders" :class="styleTypeClass" :style="{width,height:'100%'}">
    <!-- 默认样式-->
    <template>
      <div class="mt-3" style="height:200px;">
        <EchartsIndex :options="options"/>
      </div>
    </template>
  </div>
</template>

<script>
import mixin from '@/views/dashboard/mixins/index'
import mixinEcharts  from '@/views/dashboard/mixins/echarts'
export default {
  name: "repair",
  mixins: [mixin,mixinEcharts],
  components: {},
  data(){
    return {
      options:{
        color:["#1dbaff","#8DEE17FF"],
        tooltip: {
          trigger: 'item'
        },
        //类型小块快
        // legend: {
        //   top: '100%',
        //   left: 'center',
        //   fontColor:"#000",
        // },
        title: {
          // text: '总数量\n' + this.totalCount,
          top: '0%',
          left: '100px',
          textAlign: 'center',
          textStyle: {
            color: "#aaa",
            fontSize: '10px',
            lineHeight: 10
          }
        },
        //饼图 位置
        grid:{
          top:30,
          bottom:20,
          left:55,
          right:20
        },
        series: [
          {
            name: '报修数量统计',
            type: 'pie',
            radius: ['40%', '60%'],
            avoidLabelOverlap: false,
            itemStyle: {
              borderRadius: 0,
              borderColor: '#000',
              borderWidth: 1,
            },
            label: {
              show: false,
              position: 'center',
              normal:{
                show: true, //开启显示
                textStyle: {
                  fontWeight: 20,
                  fontSize:15, //文字的字体大小
                  color: "#000",
                },
              },
              emphasis:{
                show: true, //在上方显示
                textStyle: {
                  //数值样式
                  color: '#000',
                  fontSize: 20,
                  fontWeight: 100,
                },
              }
            },
            emphasis: {
              label: {
                show: true,
                fontSize: '24',
                fontWeight: 'bold'
              }
            },
            labelLine:{
              normal:{
                show: true, //开启显示
              },
            },
            data: [
              { value: this.loginCount, name: '已处理报修' },
              { value: this.createCount, name: '未处理报修' },
            ]
          }
        ]
      }
    }
  },
  props:{
    totalCount:{
      type: Number,
      default: 0
    },
    loginCount:{
      type: Number,
      default: 0
    },
    createCount:{
      type: Number,
      default: 0
    },
  },
  computed:{},

  watch:{
    totalCount() {
      this.options.title.text = '总数量\n' + this.totalCount
    },
    loginCount() {
      this.options.series[0].data[0].value = this.loginCount
    },
    createCount() {
      this.options.series[0].data[1].value = this.createCount
    }
  },
}
</script>

<style lang="scss" scoped>
@import '@/styles/datav/infoPlatform.scss';
</style>
